<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
        <common-head></common-head>
        <common-head></common-head>
        <common-head></common-head>
    </div>

    <script src="./vue.global.js"></script>
    <script>
      const { createApp } = Vue;
      const app = createApp();

      // 注册 全局组件
      /* 
        参数1 是 组件名 建议两个或以上单词组件 命名使用大驼峰 或 连接符 - 
              使用时传入成小写 加连接符 比如 组件名 CommonHead <common-head/>
        参数2 是 实例化 组件 传入 的 config （理解为 createApp传入的config对象）

       1 app.component 这相当于 定义了 创建组件的 类
          <组件/> 使用组件 相当于 new 这个类， 每一次传递的config 就是 app.component的第二个参数
       2 组件实例 和 app 实例 一样 都是 Vue 的实例， 所有他们 api是一样的
       3 为什么组件的data 必须是函数 返回对象原因， 每一次使用 组件 <组件/> 多次组件实例 使用 同一个 
       config对象，如果data是的对象，每一次实例， 传递data 是同一个地址，修改任意组件实例数据，其他都会
       改变  设计了函数返回对象，每次实例化组件 <组件/> 函数调用返回 新的对象
       4 任意一个组件 都是 封闭作用域  内部的属性方法等 只能在组件内部使用
      */
      app.component("CommonHead", {
        // template 模板视图 定义组件 视图结构
        template: `
          <div>
            <h2>这是公共的头部</h2> 
            <button @click="changeMsg">修改msg</button> 
            {{msg}}
            <br/>
            {{reverseMsg}}
          </div>
        `,
        data() {
          return {
            msg: '这是组件的数据'
          }
        },
        methods: {
          changeMsg() {
            this.msg = '值改变了';
          } 
        },
        watch: {
          msg(val) {
            console.log('msg改变了', val);
          }
        },
        computed: {
          reverseMsg(){
            return this.msg.split('').reverse().join('')
          }
        },
        mounted (){
          console.log('组件初始化完成', this);
        }
      });
      app.mount("#app");
    </script>
  </body>
</html>
